<template>
  <div style="padding: 24px">
    <!-- 顶部统计卡片 -->
    <a-row :gutter="16">
      <a-col :span="6">
        <a-card>
          <a-statistic title="用户总数" :value="1280" suffix="人" />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic title="今日订单" :value="87" suffix="单" />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic title="库存预警" :value="12" suffix="个" />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic title="系统消息" :value="5" suffix="条" />
        </a-card>
      </a-col>
    </a-row>

    <!-- 图表区域 -->
    <a-row :gutter="16" style="margin-top: 24px">
      <a-col :span="12">
        <a-card title="用户增长趋势">
          <!-- 占位：这里放 ECharts 或 G2Plot 图表 -->
          <div style="height: 300px; background: #f5f5f5; display: flex; align-items: center; justify-content: center;">
            图表区域
          </div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="订单分布">
          <!-- 占位：这里放饼图/柱状图 -->
          <div style="height: 300px; background: #f5f5f5; display: flex; align-items: center; justify-content: center;">
            图表区域
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 表格区域 -->
    <a-card title="最新订单" style="margin-top: 24px">
      <a-table
        :columns="columns"
        :data-source="data"
        :pagination="{ pageSize: 5 }"
        row-key="id"
      />
    </a-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'


const columns = [
  { title: '订单号', dataIndex: 'orderNo' },
  { title: '客户', dataIndex: 'customer' },
  { title: '金额', dataIndex: 'amount' },
  { title: '状态', dataIndex: 'status' }
]

const data = ref([
  { id: 1, orderNo: 'ORD001', customer: '张三', amount: '￥200', status: '已完成' },
  { id: 2, orderNo: 'ORD002', customer: '李四', amount: '￥350', status: '进行中' },
  { id: 3, orderNo: 'ORD003', customer: '王五', amount: '￥120', status: '已取消' },
  { id: 4, orderNo: 'ORD004', customer: '赵六', amount: '￥450', status: '进行中' },
  { id: 5, orderNo: 'ORD005', customer: '孙七', amount: '￥180', status: '已完成' }
])
</script>
